<template>
  <div calss="container">
    <div>
      <button @click="checkSelete">全选/全不选</button
      ><button @click="checkReverse">反选</button>
    </div>

    <ul>
      <li v-for="(v, i) in arr" :key="i">
        <input type="checkbox" v-model="v.id" />
        <span>张{{ 9 + i }}</span>
      </li>
    </ul>
    <div>总计:{{ getSun }}</div>
    <div><button>确定</button><button>取消</button></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { id: true },
        { id: false },
        { id: true },
        { id: true },
        { id: true },
        { id: true },
        { id: false },
        { id: false },
        { id: false },
        { id: false },
        { id: false },
        { id: false },
      ],
      flag: false,
    };
  },
  // 计算属性
  computed: {
    getSun() {
      let num = 0;
      this.arr.forEach((item) => {
        if (item.id) {
          num++;
        }
      });
      return num;
    },
  },
  // 方法集合
  methods: {
    checkReverse() {
      this.arr.forEach((item) => {
        item.id = !item.id;
      });
    },
    checkSelete() {
      this.flag = !this.flag;
      this.arr.forEach((item) => {
        item.id = this.flag;
      });
    },
  },
  // 生命周期 - DOM元素渲染前调用
  created() {
    console.log(this.$route.query.id);
  },
  // 生命周期 - DOM元素渲染后调用
  mounted() {},
  components: {},
};
</script>
<style lang='less' scoped>
input {
  appearance: none;
  border: 1px solid;
  width: 25px;
  height: 25px;
  &:checked {
    background: url("/public/img/css_sprite.png") no-repeat -3px -3px;
    background-size: 600%;
  }
}
</style>


